APP.vue
<!--利用路由将几个vue文件进行串联-->
<script setup lang="ts">
import {ref} from 'vue'//ref实时使用的前置条件
import {useRouter} from "vue-router";
//引入useRouter
const jump=useRouter()
//引入完成进行定义函数
//这是下面要用到的两个方法
const toxz=()=>{
  jump.push({name:"xz"})
  //进行链接
}
const totime=()=>{
  jump.push({
    // 敲代码
    name:'time'
  })
}
</script>

<template>
  <div id="a1">
    <div id="d1">
      <br>
      <button @click="toxz">旋转几圈</button>
      <br>
      <button @click="totime">获取当前时间</button>
    </div>
    <!--按钮跳转-->
<!--    写注释-->
    <div id="d2">
      <RouterView/>
<!--      ii-->
      <!--只能写一次进行渲染-->

    </div>
    <br>
  </div>
</template>
<style scoped>
#a1{
  display: flex;/*采用流式框架*/
  height: 100vh;/*表示高度占用全部的屏幕高度*/
}
#d1{
  width: 20%;/*宽度占屏幕的20%*/
  height: 100%;
  background-color:lime;
}
#d2{
  flex: 1;/*填充完成剩余的部分*/
  background-color: blueviolet;
}
</style>
<!--ddd-->